import 'package:flutter/material.dart';

//列表动画操作
class GridAnimationOperation extends StatefulWidget {
  @override
  _GridAnimationOperationState createState() => _GridAnimationOperationState();
}

class _GridAnimationOperationState extends State<GridAnimationOperation>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _animationController = AnimationController(
        duration: Duration(milliseconds: 2000), vsync: this);
  }

  @override
  void dispose() {
    _animationController.dispose();

    // TODO: implement dispose
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      appBar: AppBar(
        title: Text(
          "Animation List".toUpperCase(),
          style: TextStyle(color: Colors.black87, fontSize: 26.0),
        ),
        backgroundColor: Colors.grey[200],
      ),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4,
          crossAxisSpacing: 5,
          mainAxisSpacing: 5,
          childAspectRatio: 1.0,
        ),
        itemBuilder: (context, index) {
          final Animation<double> animation =
              Tween(begin: 0.0, end: 1.0).animate(
            CurvedAnimation(
                parent: _animationController,
                curve: Interval((index / 6), 1.0, curve: Curves.fastOutSlowIn)),
          );
          _animationController.forward();
          return ListContainer(
            animationController: _animationController,
            animation: animation,
          );
        },
        itemCount: 6,
      ),
    );
  }
}

class ListContainer extends StatelessWidget {
  final AnimationController animationController;
  final Animation<dynamic> animation;

  const ListContainer({Key key, this.animationController, this.animation})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: animationController,
      builder: (context, child) {
        print("object====: ${animation.value}");
        return FadeTransition(
          opacity: animation,
          child: Transform(
            transform:
                Matrix4.translationValues(0, 50 * (1 - animation.value), 0),
            child: Container(
              decoration: BoxDecoration(
                color: Colors.black54,
                borderRadius: BorderRadius.all(Radius.circular(8.0)),
              ),
              child: Center(
                child: Text(
                  "HHH",
                  style: TextStyle(color: Colors.white, fontSize: 20.0),
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}
